<template>
    <div class="wh-100">
        <!--头部-->
        <head-components :title="title"></head-components>
        <!--内容-->
        <div style="width: 500px">
            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="180">
                <FormItem prop="materialUpload">
                    <div class="d-flex-center" style="flex-direction: column">
                        <div style="width: 100px; height: 100px; border: 1px solid red; border-radius: 50%"></div>
                        <Button type="primary" style="position: relative">修改</Button>
                        <span>{{ tip3 }}</span>
                    </div>
                </FormItem>
                <FormItem label="真实姓名" prop="name">
                    <Input v-model="formValidate.name" placeholder="" style="background-color: #fff0f3"></Input>
                </FormItem>
                <FormItem label="性别" prop="gender">
                    <RadioGroup v-model="formValidate.gender">
                        <Radio label="male">男</Radio>
                        <Radio label="female">女</Radio>
                    </RadioGroup>
                </FormItem>
                <FormItem label="公司名称" prop="companyName">
                    <Input v-model="formValidate.companyName" placeholder=""></Input>
                </FormItem>
                <FormItem label="手机号" prop="cellPhoneNumber">
                    <Input v-model="formValidate.cellPhoneNumber" placeholder=""></Input>
                </FormItem>
                <FormItem label="所在部门" prop="department">
                    <Input v-model="formValidate.department" placeholder=""></Input>
                </FormItem>
                <FormItem label="担任的职位" prop="positionHeld">
                    <Input v-model="formValidate.positionHeld" placeholder=""></Input>
                </FormItem>
                <FormItem label="工作邮箱" prop="mail">
                    <Input v-model="formValidate.mail" placeholder=""></Input>
                </FormItem>
                <FormItem label="工作电话" prop="workPhone">
                    <Input v-model="formValidate.workPhone" placeholder=""></Input>
                </FormItem>
                <FormItem label="传真" prop="fax">
                    <Input v-model="formValidate.fax" placeholder="工作电话与传真至少填写一项"></Input>
                </FormItem>
                <FormItem label="上传证明材料" prop="materialUpload">
                    <span>{{ tip1 }}</span>
                    <uploadPicture :max-count="1"></uploadPicture>
                </FormItem>
                <FormItem label="上传授权公函" prop="materialUpload">
                    <span>{{ tip2 }}</span>
                    <uploadPicture :max-count="1"></uploadPicture>
                </FormItem>
                <FormItem>
                    <div class="d-flex-center" style="flex-direction: column">
                        <Button type="primary">修改并保存</Button>
                    </div>
                </FormItem>
            </Form>
        </div>
    </div>
</template>
<script>
import HeadComponents from './my-components/headComponents.vue';
import uploadPicture from '../../../components/uploadPicture/uploadPicture.vue';
import imageUploadComponent from './my-components/imageUploadComponent.vue';
export default {
    components: { imageUploadComponent, HeadComponents, uploadPicture },
    data() {
        return {
            tip1: ' 经办人手持个人有效身份证明(如身份证)的照片，请使用ipg、ipeg、png格式的图片。',
            tip2: '加盖企业公章的授权公函文件，请使用ipg、ipeg、png格式的图片。',
            tip3: '点击上传用户头像，像素：200*200px,格式：jpg,png',
            title: '账户信息',
            formValidate: {
                name: '',
                gender: '',
                companyName: '',
                cellPhoneNumber: '',
                department: '',
                positionHeld: '',
                mail: '',
                workPhone: '',
                fax: ''
            },
            ruleValidate: {
                name: [{ required: true, message: '* 姓名不能为空', trigger: 'blur' }],
                mail: [
                    { required: true, message: '* 邮箱不能为空', trigger: 'blur' },
                    { type: 'email', message: '* 邮件格式不正确', trigger: 'blur' }
                ],
                positionHeld: [{ required: true, message: '* 担任的职位不能为空', trigger: 'change' }],
                department: [{ required: true, message: '* 所在部门不能为空', trigger: 'change' }],
                cellPhoneNumber: [
                    { required: true, message: '* 手机号不能为空', trigger: 'blur' },
                    {
                        validator: function (rule, value, callback) {
                            if (/^1[34578]\d{9}$/.test(value) == false) {
                                callback(new Error('* 手机号格式错误'));
                            } else {
                                callback();
                            }
                        },
                        trigger: 'blur'
                    }
                ]
            }
        };
    }
};
</script>
<style scoped></style>
